import { PageHeaderWrapper } from "@ant-design/pro-layout"
import { Form, TabPaneProps, Tabs } from "antd"
import React, { useCallback, useMemo, useState } from "react"
import { CardLisrt } from "./components/CardList"
import { PreviewLucky } from "./components/PreviewLucy"
import { DialogSetting } from "./components/SettingDialog"


function useInteractive() {
  const [activeKey, setActiveKey] = useState<string>('All')
  const [vis, setVis] = useState<boolean>(false)
  const [visSetting, setVisSetting] = useState<boolean>(false)

  const [current, setCurrent] = useState()
  const [form] = Form.useForm()

  const tabDefs = useMemo<TabPaneProps[]>(() => {
    return [
      { tab: '全部', key: 'All' },
      { tab: '抽奖', key: 'A1' },
      { tab: '小游戏', key: 'A2' },
      { tab: '助力', key: 'A3' },
      { tab: '答题', key: 'A4' },
      { tab: '节日', key: 'A5' },
      { tab: '其他', key: 'A6' },
    ]
  }, [])

  const handleChange = useCallback((evt) => {
    setActiveKey(evt)
  }, [])


  const handleOpen = useCallback((cur) => {
    setCurrent(cur)
    setVis(true)
  }, [])

  const handleClose = useCallback(() => {
    setCurrent(null)
    setVis(false)
  }, [])

  const handleSetting = useCallback((cur) => {
    setCurrent(cur)
    setVisSetting(true)
  }, [])

  const handleSettingOk = useCallback(() => {
    setVisSetting(false)
  }, [])

  const handleCloseSetting = useCallback(() => {
    setCurrent(null)
    setVisSetting(false)
  }, [])

  return {
    activeKey,
    tabDefs,
    handleChange,
    handleOpen,
    handleClose,
    vis,
    current,
    visSetting,
    handleCloseSetting,
    handleSetting,
    handleSettingOk,
    form
  }

}

export default () => {
  const { tabDefs, activeKey, handleChange, vis,
    handleClose, handleOpen,
    current, visSetting,
    handleCloseSetting,
    handleSetting,
    handleSettingOk,
    form
  } = useInteractive()

  return (
    <PageHeaderWrapper>

      <Tabs activeKey={activeKey} onTabClick={handleChange}>
        {tabDefs.map(tx => {
          return (
            <Tabs.TabPane {...tx}>
            </Tabs.TabPane>
          )
        })}
      </Tabs>
      <CardLisrt
        onClick={handleOpen}
        onSetting={handleSetting}
      />
      {vis && <PreviewLucky
        open={vis}
        title={current?.title}
        onClose={handleClose}
        param={current?.param}
      />
      }
      {
        visSetting && <DialogSetting
          onClose={handleCloseSetting}
          onOk={handleSettingOk}
          form={form}
        />
      }
    </PageHeaderWrapper>
  )
}